<!DOCTYPE html>
<html>
<head>
  <title>IP地址转换</title>
  <script>
    function convertIP() {
      let ip = document.getElementById("ipAddress").value;
      let output = '将IP地址转换为二进制和十六进制：<br><br>';
      
      // 将IP地址转换为二进制
      let binary = ipToBinary(ip);
      output += `${ip} => ${binary}<br>`;
      
      // 将IP地址转换为十六进制
      let hex = ipToHex(ip);
      output += `${ip} => ${hex}<br>`;
      
      document.getElementById("output").innerHTML = output;
    }
    
    function ipToBinary(ip) {
      // 将IP地址拆分为四个数字
      let ipParts = ip.split(".");
      let binaryParts = [];
      
      // 将每个数字转换为8位二进制
      for (let i = 0; i < ipParts.length; i++) {
        let binaryPart = parseInt(ipParts[i]).toString(2).padStart(8, '0');
        binaryParts.push(binaryPart);
      }
      
      // 将四个二进制数字合并
      let binary = binaryParts.join(".");
      return binary;
    }
    
    function ipToHex(ip) {
      // 将IP地址拆分为四个数字
      let ipParts = ip.split(".");
      let hexParts = [];
      
      // 将每个数字转换为十六进制
      for (let i = 0; i < ipParts.length; i++) {
        let hexPart = parseInt(ipParts[i]).toString(16).toUpperCase();
        hexParts.push(hexPart);
      }
      
      // 将四个十六进制数字合并
      let hex = hexParts.join(".");
      return hex;
    }
  </script>
</head>
<body>
  <h1>IP地址转换器</h1>
  <label for="ipAddress">输入IP地址：</label>
  <input type="text" id="ipAddress">
  <button onclick="convertIP()">转换</button>
  <br><br>
  <div id="output"></div>
</body>
</html>
